<template>
  <div class="commentWriter">
    <div class="commentWriter_avatar">
      <el-avatar :icon="User" />
    </div>
    <div class="commentWriter_container">
      <input
        class="commentWriter_container_input"
        placeholder="善语如三月春风，恶语似腊月寒冬"
        v-model="commentContent"
      />
      <V3Emoji class="commentWriter_emoji" @click-emoji="clickEmoji" :custom-size="customSize" />
      <button class="commentWriter_container_btn">发送</button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import V3Emoji from 'vue3-emoji';
  import 'vue3-emoji/dist/style.css';
  import { ref } from 'vue';
  import { User } from '@element-plus/icons-vue';

  defineProps<{
    id: number;
  }>();

  const commentContent = ref('');

  const customSize = {
    'V3Emoji-width': '300px',
    'V3Emoji-height': '20rem',
    'V3Emoji-fontSize': '1rem',
    'V3Emoji-itemSize': '50px',
  };

  const clickEmoji = (val: any) => {
    commentContent.value += val;
  };
</script>

<style lang="scss" scoped>
  .commentWriter {
    margin: 10px 0;
    display: flex;

    .commentWriter_avatar {
      padding-right: 20px;
    }

    .commentWriter_container {
      display: flex;
      flex: 1;
      position: relative;

      .commentWriter_container_input {
        flex: 1;
        padding: 0 10px 0 10px;
      }

      .commentWriter_container_btn {
        width: 90px;
        margin-left: 20px;
        background-color: #8ec2c2;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }

      .commentWriter_container_btn:hover {
        background-color: #13c2c2;
      }

      .commentWriter_emoji {
        position: absolute;
        width: 30px;
        top: 6px;
        right: 110px;
      }
    }
  }
</style>
